<template>
  <div class="lsc-trainlist">
    <mt-header title="培训">
      <router-link to="/train" slot="right">
        <mt-button>我的</mt-button>
      </router-link>
    </mt-header>
    <div class="lsc-trainlist-sort">
      <div class="lsc-trainlist-sort__time actives" ref="time" @click="onClickSort('time')">
        时间
        <i class="mintui lsc-trainlist-icon down" slot="icon"></i>
      </div>
      <div class="lsc-trainlist-sort__price" ref="price" @click="onClickSort('price')">
        价格
        <i class="mintui lsc-trainlist-icon down" slot="icon"></i>
      </div>
      <div class="lsc-trainlist-sort__num" ref="num" @click="onClickSort('num')">
        剩余名额
        <i class="mintui lsc-trainlist-icon down" slot="icon"></i>
      </div>
      <div class="lsc-trainlist-sort__choose" @click="popupVisible=true">
        筛选
      </div>
    </div>
    <div class="lsc-trainlist-item" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">

      <mt-cell 
        v-for="(item,index) in trainList" 
        :key="index" 
        :title="item.train_name" 
        :label="'剩余名额： '+ item.surplus_quota" 
        :to="'/traindetails?isTrain=1&train_id=' + item.train_id + '&trainName=' + item.train_name">
        <span>
          <div 
            style="color: red;text-align:right;" 
            v-if="!item.enroll_id" 
            :key="item.enroll_id">
            ￥{{item.price}}
          </div>
          <div 
            style="color: #26a2ff;text-align:right;"
            v-else 
            :key="item.enroll_id">
            已参与
          </div>
          <small style="padding-top: 8px;display: block;">{{item.train_date.slice(0,10)}}</small>
        </span>
      </mt-cell>
      </div>
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </p>
    </div>

    <!-- 筛选 -->
    <mt-popup v-model="popupVisible" position="right" class="mint-popup-3" :modal="false">
      
      <mt-header title="筛选类别">
        <mt-button slot="left" icon="back" @click.native="popupVisible=false"></mt-button>
        <mt-button slot="right" @click.native="onPopupSave">确定</mt-button>
      </mt-header>
      <ul class="lsc-trainlist-choose__type">
        <li 
          v-for="(item,index) in trainTypes" 
          :key="index" 
          :id="item.id" 
          ref="choose" 
          @click.stop="onClickChoose(index)">
          {{item.name}}
        </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>

import api from '../api';

export default {
  name: 'trainlist',
  data () {
    return {
      popupVisible: false,
      choose: [],
      trainList: [],
      trainTypes: [],
      loading: false,
      allLoaded: false,
      wrapperHeight: 0,
      trainTotal: 0,
      pageinfo: {
        field: 1, 
        sort: 0, 
        type:[], 
        pindex:1, 
        psize:15
      }
    }
  },
  created() {
    this.postSearchTrains()
    this.getTrainsTypes()
  },
  methods: {
    onPopupSave() {
      //清空选项
      this.pageinfo.type.length>0 ? this.pageinfo.type.length=0 : ''
      console.log(this.pageinfo.type.length) 
      document.querySelectorAll('.cur').forEach((val)=>{
        this.pageinfo.type.push(val.id)
      })
      if(!this.pageinfo.type.length) {
        this.pageinfo.pindex = 1
      }else {
        this.pageinfo.pindex = 0
      }
      this.popupVisible = false
      this.postSearchTrains()
    },
    onClickChoose(index) {
      this.$refs.choose[index].classList.toggle('cur')
    },
    hasClass( elements,cName ) {  
        return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断  
    },
    addClass( elements,cName ){  
      if( !this.hasClass( elements,cName ) ){  
          elements.className += " " + cName;  
      };  
    },
    removeClass( elements,cName ){  
      if( this.hasClass( elements,cName ) ){  
        elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" )," " ); // replace方法是替换  
      };  
    },
    onClickSort(type) {
      //恢复未选中状态
      this.pageinfo.pindex = 1
      this.removeClass(this.$refs.time, 'actives')
      this.removeClass(this.$refs.price, 'actives')
      this.removeClass(this.$refs.num, 'actives')
      //给选中状态新增actives类
      document.querySelector(`.lsc-trainlist-sort__${type}`).classList.toggle('actives'); 

      // 按时间排序
      if(type === 'time') {
        if(this.$refs.time.childNodes[1].classList[2]==='down'){
          // 加载条件
          this.pageinfo.field = 1
          this.pageinfo.sort = 1
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.time.childNodes[1], 'down')
          this.addClass(this.$refs.time.childNodes[1], 'up')
        }else {
          // 加载条件
          this.pageinfo.field = 1
          this.pageinfo.sort = 0
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.time.childNodes[1], 'up')
          this.addClass(this.$refs.time.childNodes[1], 'down')
        }
        
        //初始化
        this.removeClass(this.$refs.price.childNodes[1], 'up')
        this.removeClass(this.$refs.num.childNodes[1], 'up')
        this.addClass(this.$refs.price.childNodes[1], 'down')
        this.addClass(this.$refs.num.childNodes[1], 'down')
      }

      // 按价格排序
      if(type === 'price') {
        if(this.$refs.price.childNodes[1].classList[2]==='down'){
          // 加载条件
          this.pageinfo.field = 2
          this.pageinfo.sort = 0
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.price.childNodes[1], 'down')
          this.addClass(this.$refs.price.childNodes[1], 'up')
        }else {
          // 加载条件
          this.pageinfo.field = 2
          this.pageinfo.sort = 1
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.price.childNodes[1], 'up')
          this.addClass(this.$refs.price.childNodes[1], 'down')
        }

        //初始化
        this.removeClass(this.$refs.time.childNodes[1], 'up')
        this.removeClass(this.$refs.num.childNodes[1], 'up')
        this.addClass(this.$refs.time.childNodes[1], 'down')
        this.addClass(this.$refs.num.childNodes[1], 'down')
      }
      
      // 按剩余名额排序
      if(type === 'num') {
        if(this.$refs.num.childNodes[1].classList[2]==='down'){
          // 加载条件
          this.pageinfo.field = 3
          this.pageinfo.sort = 0
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.num.childNodes[1], 'down')
          this.addClass(this.$refs.num.childNodes[1], 'up')
        }else {
          // 加载条件
          this.pageinfo.field = 3
          this.pageinfo.sort = 1
          this.postSearchTrains()
          // 交互效果
          this.removeClass(this.$refs.num.childNodes[1], 'up')
          this.addClass(this.$refs.num.childNodes[1], 'down')
        }

        //初始化
        this.removeClass(this.$refs.time.childNodes[1], 'up')
        this.removeClass(this.$refs.price.childNodes[1], 'up')
        this.addClass(this.$refs.time.childNodes[1], 'down')
        this.addClass(this.$refs.price.childNodes[1], 'down')
      }
    },
    getTrainsTypes() {
      this.axios.get(api.masterData.TrainTypes)
        .then((res)=>{
          this.trainTypes = res.data.data
        })
    },
    postSearchTrains() {
      let params = {
            sort_field: this.pageinfo.field,
            sort_order: this.pageinfo.sort,
            categorys: this.pageinfo.type,
            pageindex: this.pageinfo.pindex,
            pagesize: this.pageinfo.psize
          }
      this.axios.post(api.train.SearchTrains, params)
        .then((res) => {

          this.trainTotal = res.data.pageinfo.total
          if(this.loading){
            this.trainList = res.data.data ? this.trainList.concat(res.data.data) : []
            this.loading = false
            return
          }
          this.trainList = res.data.data
        })
    },
    loadMore() {
      let trainLen = this.trainList.length
      if(this.trainTotal > trainLen) {
         this.pageinfo.pindex =  this.pageinfo.pindex + 1
        this.loading = true;
        this.postSearchTrains()
      }else {
        this.loading = false
      }
    }
  },
  mounted() {
    this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
.lsc-trainlist-sort {
  display:flex;
  padding: 10px;
  background: #fff;
  margin-bottom: 5px;
}
.lsc-trainlist-sort__time,
.lsc-trainlist-sort__price,
.lsc-trainlist-sort__num {
  float:left;
  flex:1;
  text-align:center; 
}
.lsc-trainlist-sort__time,
.lsc-trainlist-sort__price {
  border-right: 1px solid #ccc;
}
.lsc-trainlist-sort__choose {
  float:left; 
  border-left: 2px solid #ccc; 
  padding-left: 20px;
}
.lsc-trainlist-sort__time.actives,
.lsc-trainlist-sort__price.actives,
.lsc-trainlist-sort__num.actives {
  color: #26a2ff;
}
.lsc-trainlist-icon.up:before {
  content: '\25B2';
  font-size: 10px;
}
.lsc-trainlist-icon.down:before {
  content: '\25BC';
  font-size: 10px;
}

.lsc-trainlist-choose__type {
  margin-top: 20px;
  padding: 0;
}
.lsc-trainlist-choose__type li {
  float: left;
  border:1px solid #f0f2f5;
  border-radius: 5px;
  background: #f0f2f5;
  text-align: center;
  list-style: none;
  padding: 5px 10px;
  margin: 6px;
}
/* .lsc-trainlist-choose__type li span {
  display: inline-block;
  width: 100%;
} */
.lsc-trainlist-choose__type li.cur {
  background: #26a2ff;
  color: #fff;
}

.lsc-trainlist .mint-tab-item-label {
  font-size: 14px;
}
.lsc-trainlist .mint-tab-container {
  padding: 5px 0;
}
.lsc-trainlist .lsc-trainlist-item>div>a {
  padding: 10px 0;
  margin-bottom: 1px;
}
.mint-popup-3 {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

.lsc-trainlist .mint-cell-wrapper {
  background-size: 0  
}

</style>
